<!-- 门店入驻 -->
<template>
	<view class="apply-commission-wrap page_box">
		<!-- 标题栏 -->
<!-- 		<view class="head-box" >
			<u-navbar :isFixed="false" :borderBottom="false" back-icon-color="#fff" :background="{}"></u-navbar>
		</view> -->
		<!-- <view class="nav-box" v-show="is_sf != 0">
			<view class="state-hack"></view>
			<view :style="{ height: navbarHeight + 'px' }">
				<view hover-class="back-hover" class="back-box u-m-x-30 u-flex u-row-center u-col-center" @tap="$Router.back()">
					<u-icon :name="backIconName" color="#fff"></u-icon>
				</view>
			</view>
		</view> -->
		
		<!-- 缺省页 -->
		<!-- <shopro-empty v-show="is_sf != 0" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText"
			btnText="不能重复申请" @click="$Router.back()"></shopro-empty> -->

		<!-- 表单 -->
		<view class="apply-form content_box">
			<u-form :model="{...model}" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="姓名"
					prop="name">
					<u-input placeholder="请输入姓名" :placeholderStyle="placeholderStyle" v-model="model.name"
						type="text"></u-input>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="申请类型"
					prop="type">
					<radio-group @change="handleChange">
					  <radio value="1" />
					  采购申请
					  <radio value="2"/>
					  业绩申请
					</radio-group>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" v-show="model.type==1"　 label-width="150" label-position="left" label="采购金额"
					prop="phone">
					<u-input placeholder="采购金额" :placeholderStyle="placeholderStyle" v-model="zmd_cg_money"
						type="text" :disabled="true"></u-input>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" v-show="model.type==2"　 label-width="150" label-position="left" label="达标业绩"
					prop="phone">
					<u-input placeholder="达标业绩" :placeholderStyle="placeholderStyle" v-model="zmd_yj_money"
						type="text" :disabled="true"></u-input>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号"
					prop="phone">
					<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="model.phone"
						type="text"></u-input>
				</u-form-item>
				
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="商家所在地"
					prop="area">
					<u-input type="select" :select-open="pickerShow" v-model="model.area" placeholder="请选择地区" 
						@click="pickerShow = true"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="详细地址"
					prop="address">
						<u-input type="text" v-model="model.address" placeholder="请输入详细地址"></u-input>
				</u-form-item>
				
				</u-form-item>
				<view class="agreement u-flex u-col-center">
					<u-checkbox v-model="model.agreement" activeColor="#4CB89D" shape="circle" @change="onAgreement">
					</u-checkbox>
					<view class="agreement-text" @tap="toProtocol">勾选代表同意《代理入驻协议》</view>
				</view>
				<view class="u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSubmit"
						:disabled="isFormEnd">确认申请</button></view>
					
			</u-form>
			<!-- <view class="agreement u-flex u-col-center">
				<view class="agreement-text tops" @tap="toProtocoltow">专卖店购买申请通道</view>
			</view> -->
		</view>
		<u-select mode="mutil-column-auto" safe-area-inset-bottom
			:list="addressAreaList"
			v-model="pickerShow"
			@confirm="regionConfirm">
		</u-select>
		
		<!-- 权限验证 -->
		
	</view>
</template>

<script>
	import Auth from '@/shopro/permission/index.js';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				backIconName: 'arrow-left',
				showEmpty: true,
				showEmptyText: '',
				showNotice: false,
				isFormEnd: false,
				authNotice: {},
				is_sf:0,
				// 表单
				errorType: ['message'],
				pickerShow: false,
				selectShow: false,
				selectMode: 'mutil-column', // single-column, mutil-column, mutil-column-auto
				selectType: '',
				selectList: [],
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '500',
					color: '#333'
				},
				zmd_yj_money:'',
				zmd_cg_money:'',
				flag:false,
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model: {
					name:"",
					phone: '', //联系电话
					province_name: "", //省名称
					province_id: "", //省id
					city_name: "", //城市名称
					city_id: "", //城市id
					area_name: "", //区域名称
					area_id: "", //区域id
					address: '', //企业注册地址-详细地址,
					area:"",
					type:""
				},
				
				addressAreaList:[],
				agreement: false,
				rules: {
					name: [{
						max:20,
						required: true,
						message: '请输入商家名称',
						trigger: ['change', 'blur']
					}],
					
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur']
						}
					],
					area: [{
						required: true,
						message: '请选择所在地区',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				},
				status:0,
			};
		},
		computed: {
			...mapState({
					config: ({ shopro }) => shopro.config
			}),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		onShow() {
			this.getStoreInfo();
			this.fetchArea();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			handleChange(e) {
						// this.value = e.detail.value;
						// if(e.detail.value==2){
						// 	// console.log(this.flag);
						// 	if(this.flag==false){
						// 		this.flag = true;
						// 	}
						// 	uni.showToast({
						// 					title:'您的业绩不达标',
						// 					icon:'exception',
						// 					duration:850
						// 				});
						// 	return;
						// }
						
						this.model.type = e.detail.value;
						// console.log(this.value);
					},
			async fetchArea() {
				this.$http('address.area').then(res => {
					if (res.code === 1) {
						let { provinceData, cityData, areaData } = res.data;
						if(this.addressAreaList.length > 0) return
						provinceData.forEach((item, index) => {
							this.addressAreaList.push({ ...item, children: [] });
							this.addressAreaList[index].children.push(...cityData[index]);
							this.addressAreaList[index].children.forEach((item1, index1) => {
								item1['children'] = [];
								item1.children.push(...areaData[index][index1]);
							});
						});
					}
				});
			},
			regionConfirm(items) {
				this.model.area = items[0].label + '-' + items[1].label + '-' + items[2].label;
				this.model.province_name = items[0].label
				this.model.province_id = items[0].value;
				this.model.city_name = items[1].label;
				this.model.city_id = items[1].value;
				this.model.area_name = items[2].label;
				this.model.area_id = items[2].value;
			},
			// 弹窗按钮
			onAuthBtn(path) {
				path &&
					this.$Router.push({
						path: path
					});
				this.showNotice = false;
			},
			
			
			// 地址选择
			async chooseLocation() {
					uni.chooseLocation({
						success: res => {
							this.model.address = res.address + res.name;
						},
						fail: err => {
							console.log(err);
						}
					});
			},

			// 勾选同意
			onAgreement(e) {
				this.agreement = e.value;
			},

			// 门店详情
			getStoreInfo(isrefresh) {
				let that = this;
				that.$http('dianpu.dianpu_detail').then(res => {
					this.zmd_yj_money = res.zmd_yj_money
					this.zmd_cg_money = res.zmd_cg_money
					this.flag         = res.flag
					this.is_sf        = res.is_sf
					// if(res.is_sf== -1){
					// 	this.jump('/pages/user/wallet/recharge');
					// 	return;
					// }
					// if (res.code === 1) {
					// 	try{
					// 		res.data && this.authStatus(res.data,isrefresh);
					// 	}catch(e){
					// 		//TODO handle the exception
					// 	}
					// }else{
					// 	this.status = 0;
					// }
				});
			},
			toProtocol() {
				// 跳转门店协议
				this.jump('/pages/public/richtext?id=60');
			},
			toProtocoltow() {
				// 跳转门店协议
				this.jump('/pages/goods/detail?id=983');
			},
			// 初始化model
			initModel() {
				// 初始化市区
				if (this.model.province_name) {
					this.model.area = `${this.model.province_name}-${this.model.city_name}-${this.model.area_name}`;
				}
				if (this.model?.images_arr?.length > 0) {
					this.model.images_arr.forEach(item => {
						this.model.fileImages.push({
							url: item
						});
					});
				}
				// 协议
				this.$set(this.model, 'agreement', false);
			},
			hanldeResult(){
				if(this.status != -1){
					this.$Router.push(this.authNotice.btnPath)
				}
				this.showNotice = false;
			},
			// 状态鉴权
			authStatus(data,isrefresh) {
				this.status = data.status;
				switch (String(data.status)) {
					case '0':
						this.showNotice = true;
						if(isrefresh == 'refresh'){
							this.model.company_representative_idcard_front_image = '';
							this.model.company_representative_idcard_reverse_image = '';
							this.model = {
								...this.model,
							};
						}else {
							this.model = {
								...this.model,
								...data
							};
						}
						this.initModel();
						this.authNotice = {
							img: this.$IMG_URL + '/imgs/commission/auth_check.png',
							title: data.need_buy_goods == 1 ? '您的申请资料已提交！' : '您的申请正在审核中',
							detail: data.status_msg,
							showbuybtn: data.need_buy_goods,
							showbuyid: data.need_buy_goods == 1 ? data.dianpu_agent_goods_id : '',
							btnText: '返回',
							btnPath: '/pages/index/user'
						};
						break;
					case '-1':
						this.showNotice = true;
						this.model = {
							...this.model,
							...data
						};
						this.initModel();
						this.authNotice = {
							img: this.$IMG_URL + '/imgs/commission/auth_reject.png',
							title: '您的申请已被驳回！',
							detail: data.status_msg,
							btnText: '重新申请',
							btnPath: ''
						};
						break;
					case '1':
						this.showNotice = true;
						this.model = {
							...this.model,
							...data
						};
						this.initModel();
						this.authNotice = {
							img: this.$IMG_URL + '/imgs/commission/auth_check.png',
							title: '您当前已开通店铺',
							btnText: '返回',
							btnPath: '/pages/index/user'
						};
						break;

					default:
				}
			},

			// 申请门店
			applyStore() {
				let that = this;
				this.isFormEnd = false;
				// let params = {
				// 	name:this.model.name,
				// 	company_name:this.model.company_name,//  公司名称
				// 	realname: this.model.realname, //法人姓名
				// 	phone: this.model.phone, //联系电话
				// 	province_name: this.model.province_name, //省名称
				// 	province_id: this.model.province_id, //省id
				// 	city_name: this.model.city_name, //城市名称
				// 	city_id: this.model.city_id, //城市id
				// 	area_name: this.model.area_name, //区域名称
				// 	area_id: this.model.area_id, //区域id
				// 	address: this.model.address, //企业注册地址-详细地址,
				// 	company_license_image: this.image_obj.company_license_image || this.model.company_license_image, //营业执照地址
				// 	company_bank: this.model.company_bank, // 对公账户开户行
				// 	company_bank_name: this.model.company_bank_name, // 对公账户名称
				// 	company_bank_card: this.model.company_bank_card, // 对公账户
				// 	company_representative_idcard_front_image: this.image_obj.company_representative_idcard_front_image || this.model.company_representative_idcard_front_image, // 身份证正面
				// 	company_representative_idcard_reverse_image: this.image_obj.company_representative_idcard_reverse_image || this.model.company_representative_idcard_reverse_image,// 身份证反面
				// }
				// if(this.model.type == 1){
				// 	this.toProtocoltow();
				// 	return;
				// }else{
					
				// }
				if(this.model.type == 2 && !this.flag){
					uni.showToast({
						title:'您的业绩不达标不能申请',
						icon:'exception',
						duration:850
					});
				   return
				}
				
				let params = this.model;
				
				// if(this.status == -1){
					
				// }
				params.id = this.model.id;
				
				that.$http('dianpu.dianpu_apply_edit', params, '提交中...').then(res => {
					if (res.code === 1) {
						if(this.model.type==2){
							// that.$u.toast('提交成功');
							
							uni.showToast({
								title:'申请成功',
								icon:'exception',
								duration:2000
							});
							setTimeout(() => {
								this.jump('/pages/index/user');
							}, 2000)
						}else{
							this.toProtocoltow();
						}
						
					}
				});
				
			},
			// 提交
			onSubmit() {
				let that = this;
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.agreement) return this.$u.toast('请勾选协议');
						this.applyStore();
					} else {
						this.$u.toast('请完善表单');end 
					}
				});
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss">
	.apply-commission-wrap {
		background-color: #fff;

		.head-box {
			background: url($IMG_URL+'/imgs/user/sh_shop_apply_head.png') no-repeat;
			background-size: 100% auto;
			height: 370rpx;
		}
	}

	// 表单
	.apply-form {
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
	
	.agreement {
			margin-top: 20rpx;

			.agreement-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #4cb89d;
			}
			.tops{
				font-size: 32rpx;
				font-weight: 500;
				color: #4cb89d;
				text-align: center;
				margin: 0 auto;
				margin-top: 50rpx;
			}
		}
	
	.save-btn {
			width: 690rpx;
			line-height: 86rpx;
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
			border-radius: 43rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 30rpx 0;
		}
	}

	// 星期
	.week-modal {
		.week-modal--head {
			height: 100rpx;
			border-bottom: 1rpx solid $u-border-color;

			.text-cancel {
				color: #ccc;
			}

			.text-green {
				color: #18b566;
			}
		}

		.week-modal--content {
			.week-btn {
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				&:nth-of-type(3n) {
					margin-right: 0;
				}
			}
		}
	}

	// 提示
	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 612rpx;
		min-height: 658rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;

		.img-wrap {
			margin-bottom: 50rpx;

			.notice-img {
				width: 180rpx;
				height: 170rpx;
			}
		}

		.notice-title {
			font-size: 35rpx;
			font-weight: bold;
			color: #46351b;
			margin-bottom: 28rpx;
		}

		.notice-detail {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 50rpx;
		}

		.notice-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 10rpx;
		}

		.back-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #3ab29c;
			background: none;
		}
		.goshop{
			background: #fc7205;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #FFF;
			margin-bottom: 20rpx;
		}
	}
</style>
